﻿<%@ Page Title="Calendario" Language="C#" MasterPageFile="~/controlasistencia/Plantilla.Master" AutoEventWireup="true" CodeBehind="calendario.aspx.cs" Inherits="Presentacion.calendario" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contenido" runat="server">

    <div class="row">
        <div class="col-lg-12">
            <div class="page-title">
                <h1>CALENDARIO ACADÉMICO</h1>
                <ol class="breadcrumb">
                    <li><i class="fa"></i><a href="index.aspx" class="tamano-breadcrumbs">Inicio</a>
                    </li>
                    <li class="active tamano-breadcrumbs">Calendario</li>
                </ol>
            </div>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-3">
            <% 
                if (Session["admin"] != null)
                {     
            %>
            <div class="portlet portlet-default">
                <div class="portlet-heading">
                    <div class="portlet-title">
                        <h3>Arrastre los Eventos</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="portlet-body">
                    <!-- the events -->
                    <div id='external-events'>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
          <h4>Al momento de arrastrar el evento al calendario!, ¿Se considerarán asistencias? <input type="checkbox" name="name" value="SI" id="asistencia" style="height: 15px; width: 15px; border: 2px solid red" /></h4>
            
            <div class="portlet portlet-default">
                <div class="portlet-heading">
                    <div class="portlet-title">
                        <h3>Crear Eventos</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="portlet-body">
                    <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                        
                        <button type="button" id="color-chooser-btn" class="btn btn-danger btn-block btn-sm dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
                        <ul class="dropdown-menu" id="color-chooser">
                            <li><a class="text-green" href="#"><i class="fa fa-square"></i>Verde</a></li>
                            <li><a class="text-blue" href="#"><i class="fa fa-square"></i>Azul</a></li>
                            <li><a class="text-orange" href="#"><i class="fa fa-square"></i>Naranja</a></li>
                            <li><a class="text-yellow" href="#"><i class="fa fa-square"></i>Amarillo</a></li>
                            <li><a class="text-red" href="#"><i class="fa fa-square"></i>Rojo</a></li>
                            <li><a class="text-navy" href="#"><i class="fa fa-square"></i>Azul Marino</a></li>
                            <li><a class="text-aqua" href="#"><i class="fa fa-square"></i>Celeste</a></li>
                            <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i>Fucsia</a></li>
                            <li><a class="text-purple" href="#"><i class="fa fa-square"></i>Purpura</a></li>
                        </ul>
                    </div>
                    <!-- /btn-group -->
                    <div class="input-group">
                        <input id="new-event" type="text" class="form-control" placeholder="Event Title">
                        <div class="input-group-btn">
                            <button id="add-new-event" type="button" class="btn btn-default btn-flat">Add</button>
                        </div>
                        <!-- /btn-group -->
                    </div>
                    <!-- /input-group -->
                </div>
            </div>
            <%
                } %>
            <div class="portlet portlet-default">
                <div class="portlet-heading">
                    <div class="portlet-title">
                        <h3>Colores Reservados</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="portlet-body">
                    <table>
                        <tr>
                            <td><span class="label  green">Verde</span></td>
                            <td>Inicio de Clases</td>
                        </tr>
                        <tr>
                            <td><span class="label blue">Azul</span></td>
                            <td>Fin de Clases</td>
                        </tr>
                        <tr>
                            <td><span class="label orange">Naranja</span> </td>
                            <td>Periodo de Matricula Ordinaria</td>
                        </tr>
                        <tr>
                            <td> <span class="label red">Rojo</span></td>
                            <td>Periodo de Matricula Extraordinaria</td>
                        </tr>
                        <tr>
                            <td> <span class="label fuchsia">Fucsia</span></td>
                            <td>Periodo de Matricula Especiales</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-md-9">
            <div class="portlet portlet-default">
                <div class="box-body no-padding">
                    <!-- THE CALENDAR -->
                    <form id="form1" runat="server">
                        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
                        </asp:ScriptManager>
                        <div class="clearfix"></div>
                        <div class="portlet-body">
                            <div id="calendar"></div>
                        </div>
                    </form>

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
        </div>
        <!-- /.col -->
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">

    <!-- Funciones para lanzar los mensajes de eventos -->
    <script src="js/notifications.js"></script>
    <script>
        function rgb2hex(rgb) {
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            return "#" +
             ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
             ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
             ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);
        }
        $(function () {

            /* initialize the external events
             -----------------------------------------------------------------*/
            function ini_events(ele) {
                ele.each(function () {

                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                    // it doesn't need to have a start or end
                    var eventObject = {
                        title: $.trim($(this).text()) // use the element's text as the event title
                    };

                    // store the Event Object in the DOM element so we can get to it later
                    $(this).data('eventObject', eventObject);

                    // make the event draggable using jQuery UI
                    $(this).draggable({
                        zIndex: 1070,
                        revert: true, // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    });

                });
            }
            ini_events($('#external-events div.external-event'));

            /* initialize the calendar
             -----------------------------------------------------------------*/
            //Date for the calendar events (dummy data)
            var date = new Date();
            var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month'
                },
                buttonText: {//This is to add icons to the visible buttons
                    prev: "<span class='fa fa-caret-left'></span>",
                    next: "<span class='fa fa-caret-right'></span>",
                    today: 'hoy',
                    month: 'mes',
                    week: 'semana',
                    day: 'dia'
                },
                //Generacion de los eventos
               <% Negocio.catalogoCalendarioAcademico _objCatalogoCalendario = new Negocio.catalogoCalendarioAcademico(); %>

                events: [ <% 
        List<Negocio.calendarioAcademico> events = new List<Negocio.calendarioAcademico>();
        foreach (var item in _objCatalogoCalendario.obtenerCalendarioAcademicoxPeriodo(int.Parse(Session["periodo"].ToString())))
        {
            Response.Write("{ id: '" + item.id + "', title: '" + item.title + "', start: new Date(" + item.start.Value.Year + "," + item.start.Value.Month + "-1, " + item.start.Value.Day + "), end: new Date(" + item.end.Value.Year + "," + item.end.Value.Month + "-1, " + item.end.Value.Day + "), backgroundColor: '" + item.backgroundColor + "' , borderColor: '" + item.borderColor + "', asistencia: '" + item.asistencia + "' },");
        }      
               %>
                ],
                editable: true,
                eventResize: function (calEvent, delta, revertFunc) {
                    if (calEvent.end === null) {
                        var eventToUpdate = {
                            id: calEvent.id,
                            title: calEvent.title,
                            start: calEvent.start,
                            end: calEvent.start,
                            backgroundColor: calEvent.backgroundColor,
                            borderColor: calEvent.backgroundColor
                        }
                    } else {
                        var eventToUpdate = {
                            id: calEvent.id,
                            title: calEvent.title,
                            start: calEvent.start,
                            end: calEvent.end,
                            backgroundColor: calEvent.backgroundColor,
                            borderColor: calEvent.backgroundColor
                        }
                    }

                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);

                },
                eventDrop: function (calEvent, delta, revertFunc) {
                    if (calEvent.end === null) {
                        var eventToUpdate = {
                            id: calEvent.id,
                            title: calEvent.title,
                            start: calEvent.start,
                            end: calEvent.start,
                            backgroundColor: calEvent.backgroundColor,
                            borderColor: calEvent.backgroundColor
                        }
                    } else {
                        var eventToUpdate = {
                            id: calEvent.id,
                            title: calEvent.title,
                            start: calEvent.start,
                            end: calEvent.end,
                            backgroundColor: calEvent.backgroundColor,
                            borderColor: calEvent.backgroundColor
                        }
                    };
                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);

                },
       <% 
        if (Session["admin"] != null)
        {     
       %>
                selectable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                select: function (start, end, allDay) {
                    return bootbox.prompt("Titulo del evento", function (title) {
                        if (title != null) {
                            var asistencia=false;
                            if (document.getElementById("asistencia").checked==true) {
                                asistencia=true;
                            }
                            var eventToAdd = {
                                title: title,
                                start: start,
                                end: start,
                                backgroundColor: "#00a65a",
                                borderColor: "#00a65a",
                                idPeriodo: <% Response.Write(Session["periodo"].ToString()); %>,
                                asistencia : asistencia 
                                };
                            PageMethods.addEvent(eventToAdd, addSuccess);

                            $('#calendar').fullCalendar("renderEvent", {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            }, true);
                            return $('#calendar').fullCalendar('unselect');
                        }
                    });
                },
                eventClick: function (calEvent, jsEvent, view) {
                    var cheked="";
                    if (calEvent.asistencia=="True") {
                        cheked="<input type='checkbox' name='name' value='SI' id='asistencia2' style='height:15px;width:15px;border:2px solid red' checked /> ";
                    }
                    else {
                        cheked="<input type='checkbox' name='name' value='SI' id='asistencia2' style='height:15px;width:15px;border:2px solid red'/> ";
                    }
                    return bootbox.dialog({
                        
                        message: $("<form class='form'><label>Cambiar nombre del evento</label></form><input id='new-event-title' class='form-control' type='text' value='" + calEvent.title + "' />¿Este evento considera asistencias ? "+cheked+" "),
                        buttons: {
                            "delete": {
                                label: "<i class='icon-trash'></i> Eliminar evento",
                                className: "pull-left",
                                callback: function () {
                                    var idEvent = calEvent._id;
                                    PageMethods.deleteEvent(idEvent, deleteSuccess);
                                    return $('#calendar').fullCalendar("removeEvents", calEvent._id);
                                } //Cierre funcion callback
                            },
                            success: {
                                label: "<i class='icon-save'></i> Guardar",
                                className: "btn-success",
                                callback: function () {

                                    if (calEvent.end == null) {
                                        calEvent.end = calEvent.start;
                                    }
                                    var asistencia=false;
                                    if (document.getElementById("asistencia2").checked==true) {
                                        asistencia=true;
                                    }
                                    var eventToUpdate = {
                                        id: calEvent.id,
                                        title: $("#new-event-title").val(),
                                        start: calEvent.start,
                                        end: calEvent.end,
                                        backgroundColor: calEvent.backgroundColor,
                                        borderColor: calEvent.backgroundColor,
                                        asistencia:asistencia
                                    };
                                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                                    calEvent.title = $("#new-event-title").val();
                                    return $('#calendar').fullCalendar('updateEvent', calEvent);
                                }
                            }
                        }
                    });
                },
                <%
        }
        else
        {    
                %>
                selectable: false,
                droppable: false, 
                editable: false,
                <%
        }
                %>
                drop: function (date, allDay) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);

                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    copiedEventObject.backgroundColor = rgb2hex($(this).css("background-color"));
                    copiedEventObject.borderColor = rgb2hex($(this).css("border-color"));
                    var asistencia=false;
                    if (document.getElementById("asistencia").checked==true) {
                        asistencia=true;
                    }
                    var eventToAdd = {
                        id: copiedEventObject.id,
                        title: copiedEventObject.title,
                        start: copiedEventObject.start,
                        end: copiedEventObject.start,
                        backgroundColor: copiedEventObject.backgroundColor,
                        borderColor: copiedEventObject.backgroundColor,
                        idPeriodo: <% Response.Write(Session["periodo"].ToString()); %>,
                        asistencia:asistencia
                        };
                    PageMethods.addEvent(eventToAdd, addSuccess);
                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                    $(this).remove();

                }
            });

            /* ADDING EVENTS */
            var currColor = "#f56954"; //Red by default
            //Color chooser button
            var colorChooser = $("#color-chooser-btn");
            $("#color-chooser > li > a").click(function (e) {
                e.preventDefault();
                //Save color
                currColor = $(this).css("color");
                //Add color effect to button
                colorChooser
                        .css({ "background-color": currColor, "border-color": currColor })
                        .html($(this).text() + ' <span class="caret"></span>');
            });
            $("#add-new-event").click(function (e) {
                e.preventDefault();
                //Get value and make sure it is not null
                var val = $("#new-event").val();
                if (val.length == 0) {
                    return;
                }

                //Create event
                var event = $("<div />");
                event.css({ "background-color": currColor, "border-color": currColor, "color": "#fff" }).addClass("external-event");
                event.html(val);
                $('#external-events').prepend(event);

                //Add draggable funtionality
                ini_events(event);

                //Remove event from text input
                $("#new-event").val("");
            });
        });
    </script>

</asp:Content>
